<template>
	<view class="cart_box">
		<!-- 收获地址 -->
		<my-address />
		
		<!-- 标题区域 -->
		<view class="title_box">
			<uni-icons type="shop" size="18" />
			<text class="title_text">购物车</text>
		</view>
		
		<!-- 购物车空白时显示 -->
		<view class="cart_empty_box" v-if="!cart.length">
			<text>购物车空。。。</text>
		</view>
		
		<!-- 内容区域 -->
		<view class="cart_content_box" v-else>
			<uni-swipe-action>
				<block v-for="(item, index) in cart" :key="index">
					<uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(item.goods_id)">
						<goods-items :item="item" :showRadio="true" @radio-Change="radioClickHandler" @num-change="numberChangeHandler" />
					</uni-swipe-action-item>	
				</block>
			</uni-swipe-action>
		</view>
		
		<!-- 结算组件 -->
		<my-settle @allCheck="allCheck" />
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		mixins: [badgeMix],
		data() {
			return {
				goods: {},
				options: [{
					text: '删除',
					style: { backgroundColor: '#c00000' } 
				}],
			};
		},
		computed: {
			...mapState('store_cart', ['cart'])
		},
		methods: {
			...mapMutations('store_cart', ['updateState', 'updateCount', 'updateAllState','deleteGoods']),
			
			// 点击购物车单选框
			radioClickHandler(e) {
				this.updateState(e)
				// this.goodsIsAllChecked();
			},
			
			// 处理商品数量
			numberChangeHandler(e) {
				this.updateCount(e)
			},
			
			// 滑动删除购物车中的商品
			swipeActionClickHandler(e) {
				this.deleteGoods(e)
			},
			
			// 全选事件
			allCheck(e) {
				console.log(e)
				// 改变 vuex 中的 cart.goods_state
				this.updateAllState(e)
			}
			
		}
	}
</script>

<style lang="scss">
	.cart_box {
		.title_box {
			width: 100%;
			display: flex;
			flex-direction: row;
			padding: 10px;
			border-bottom: 1px solid #DCDCDC;
			.title_text {
				padding-left: 10rpx;
			}
		}
		.cart_empty_box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 20px;
		}
		.cart_content_box {
			margin-bottom: 85rpx;
		}
	}
</style>
